<header class="main-header">
    <!-- Logo -->
    <a class="logo" *ngIf="layoutMode=='sidebar'">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini">
            <img src="assets/img/logo.png" alt="">
        </span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>览众</b>业务预警平台</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
        <div [class.container]="layoutMode=='topnav'">
            <div class="navbar-header" *ngIf="layoutMode=='topnav'">
                <a href="/pages/consoler/entry" class="navbar-brand"><b>览众</b>业务预警平台</a>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" *ngIf="layoutMode=='sidebar'">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse pull-left" id="navbar-collapse" *ngIf="layoutMode=='topnav'">
                <ul class="nav navbar-nav">
                    <li [class.dropdown]="item.sublinks" *ngFor="let item of links" [class.active]="item.link?(item.link[0] === currentUrl):false">
                        <a (click)="nav(item,null)" [class.dropdown-toggle]="item.sublinks" data-toggle="dropdown">{{item.title}} 
                            <span *ngIf="item.sublinks" class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu" *ngIf="item.sublinks">
                            <li *ngFor="let subitem of item.sublinks">
                                <a (click)="nav(item,subitem)">{{subitem.title}}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="assets/img/user2-160x160.jpg" class="user-image" alt="User Image">
                            <span class="hidden-xs">{{user.username}}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                <p>
                                    {{user.username}} - {{user.role}}
                                    <small>{{user.email}}</small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <!--       <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">Profile</a>
                                </div> -->
                                <div class="pull-right">
                                    <a (click)="removeSession()" class="btn btn-default btn-flat">安全退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                    <!-- <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li> -->
                </ul>
            </div>
        </div>
    </nav>
</header>
